import React from 'react';
import Screen from '../Base/Screen';
import {connect} from 'react-redux';
import {withRouter} from 'react-router-dom';
import {Avatar, Badge, Divider, Dropdown, Icon, Menu} from 'antd';
import {formatPath, getMainNav, getPath, SystemConfig} from '../../router/router';
import styles from './index.module.css';

import UserOverlay from './UserOverlay';
import QuickLinkOverlay from './QuickLinkOverlay';
import Notification from './Notification';
import Immutable from "immutable";

const SubMenu = Menu.SubMenu;
const mainNav = getMainNav();

class Header extends Screen {
    constructor() {
        super();

        this.state = {
            isOpen: false,
        }
    }

    genNavItem = (nav) => {
        if (nav.pass) return null;

        if (nav.subMenu && nav.subMenu.length > 0) {
            return (
                <SubMenu style={{minWidth: '1.2rem'}} key={nav.path || nav.name}
                         title={<span><Icon style={{marginRight: '5px'}}
                                            type={nav.icon || 'file'}/><span>{nav.name}</span></span>}>
                    {
                        nav.subMenu.map(n => (
                            this.genNavItem(n)
                        ))
                    }
                </SubMenu>
            )
        } else {
            return (
                !!~nav.path.indexOf('http') ? (
                    <Menu.Item style={{minWidth: '1.2rem'}} key={nav.path}>
                        <Icon style={{marginRight: '5px'}} type={nav.icon || 'file'}/>
                        <a style={{display: 'inline-block'}} target={'_blank'}
                           href={nav.path}>{nav.name}</a></Menu.Item>
                ) : (
                    <Menu.Item style={{minWidth: '1.2rem'}} key={nav.path}
                               onClick={this.onPushScreen.bind(this, nav.path)}>
                        <Icon style={{marginRight: '5px'}} type={nav.icon || 'file'}/>
                        <span>{nav.name}</span>
                    </Menu.Item>
                )
            )
        }
    };

    onMainMenuClick = (item) => {
        this.onPushScreen(item.path);
    };

    onLogout = () => {
        this.onSetValueToStore(['root', 'user'], Immutable.fromJS({}));
        this.onPushScreen('/login')
    };

    scrollToAnchor = (anchorName) => {
        if (anchorName) {
            let anchorElement = document.getElementById(anchorName);
            if (anchorElement) {
                anchorElement.scrollIntoView(true);
            }
        }
    };

    render() {
        return (
            <div className="header clearfix" id="screens">
                <a className="toTop" onClick={() => this.scrollToAnchor('scrollContent')}/>
                <div className="logo flex-box fl"
                     style={!this.props.collapsed ? {width: '2.46rem'} : {width: '.8rem'}}>
                    <div className={styles.logoInfor} onClick={() => {
                        if (this.props.isMobile) {
                            this.onSetValueToStore(['root', 'app', 'drawerVisible'], true);
                        }
                    }}>
                        <img className="logo-img" src={SystemConfig.systemLogo}/>
                        {
                            !this.props.collapsed ? (
                                <h2 className="logo-text">{SystemConfig.systemShortName}</h2>
                            ) : (
                                <Divider type="vertical" key="line" style={{margin: '0 3px', display: 'none'}}/>
                            )
                        }
                    </div>
                </div>


                <Menu className="header-nav fl"
                      theme="light"
                      mode="horizontal"
                      selectedKeys={[formatPath((getPath(this.props.location.pathname)[0] && getPath(this.props.location.pathname)[0].path) || '/system')]}
                >
                    {
                        mainNav.map(item => (
                            !!~item.path.indexOf('http') ? (
                                <Menu.Item key={formatPath(item.path)}><a target={'_blank'}
                                                              href={item.path}>{item.name}</a></Menu.Item>
                            ) : (
                                <Menu.Item onClick={this.onMainMenuClick.bind(this, item)}
                                           key={formatPath(item.path)}>{item.name}</Menu.Item>
                            )
                        ))
                    }
                </Menu>

                <div className={styles.headerControl}>
                    {/*<Dropdown overlay={<QuickLinkOverlay/>} className="mydrop">*/}
                    {/*    <div className={styles.dropText}>*/}
                    {/*        <Icon type="profile"/>*/}
                    {/*    </div>*/}
                    {/*</Dropdown>*/}
                    {/*<Dropdown overlay={<Notification/>}>*/}
                    {/*    <div className={styles.dropText}>*/}
                    {/*        {*/}
                    {/*            <Badge*/}
                    {/*                count={this.props.messages && this.props.messages.map(m => m.get('data', Immutable.fromJS([])).size).reduce((acc, cur) => acc + cur, 0)}*/}
                    {/*                className="notice">*/}
                    {/*                <a href="javascript:;" className="head-example">*/}
                    {/*                    <Icon type="bell" className={styles.message}/>*/}
                    {/*                </a>*/}
                    {/*            </Badge>*/}
                    {/*        }*/}
                    {/*    </div>*/}
                    {/*</Dropdown>*/}
                    <Dropdown overlay={
                        <UserOverlay onLogout={this.onLogout.bind(this)}/>
                    }>
                        <div className={styles.dropText}>
                            {
                                this.props.user.get('avatar', '') ? (
                                    <Avatar src={this.props.user.get('avatar')}/>
                                ) : (
                                    <Avatar icon="user"/>
                                )
                            }
                            <span
                                className="header-admin-text">{this.props.user.get('nickname') || this.props.user.get('account') || ''}</span>
                        </div>
                    </Dropdown>
                </div>
            </div>

        )
    }
}

export default withRouter(connect(state => ({
    collapsed: state.root.app.get('collapsed'),
    isMobile: state.root.app.get('isMobile'),
    messages: state.root.app.get('messages', Immutable.fromJS([])),
    user: state.root.user,
}))(Header));
